<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" >
<!--          <img @click="back" src="../../assets/返回.png" alt="">-->
<!--          <span @click="back" class="solid">返回</span>-->
        </div>
        <div class="div">
          <span>实名认证</span>
        </div>
        <div class="div">
          <span></span>
        </div>
      </header>
      <div class="menu">
        <el-steps :active="menuIndex" align-center>
          <el-step title=""
                   v-for="(item, index) in menuList"
                   :key="index"
                   @click.native="changeMenu(index, url)"
                   process-status="success"
                   :description="item.title">
            <template #icon>
              <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
                <img src="../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
              </div>
              <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
                <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      <div class="tips">完成实名认证后，可开通咨询服务，管理您的患者档案</div>
    </div>
    <div class="title">
      <a  class="hengGang"></a>
      请上传本人的执业证书照片
    </div>
    <div class="title" style="font-weight: 500">
      医师执业证书
    </div>
    <div class="describe">
      请拍摄清晰的证书照片，需包含姓名、个人照片及钢印、证书编码、执业医院，最少上传两张
    </div>
    <div class="imgDiv" style="background: #FFFFFF">
      <van-uploader
        v-model="PracticeInfo.zhiYeFileList"
        :upload-icon="require('../../assets/上传图片.png')"
        @delete="DeleteZhiyeImg"
        :before-delete="beforeDelZhiYe"
        image-fit="cover"
        accept="image/*"
        preview-size="27vw"
        :after-read="updateFileZhiye"
        multiple="true"
      />
    </div>
    <van-collapse style="margin: 5px 0" v-model="activeNames1">
      <van-collapse-item title="示例" name="1">
        <div class="Examples">
          <div></div>
          <div></div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class="title" style="font-weight: 500">
      职称证书
    </div>
    <div class="describe">
      请拍摄清晰的证书照片，需包含姓名、个人照片及钢印（主治及以上职称请提供职称证书，住院医师可上传工牌）
    </div>
    <div class="imgDiv" style="background: #FFFFFF">
      <van-uploader
                    v-model="PracticeInfo.zhiChengFileList"
                    :upload-icon="require('../../assets/上传图片.png')"
                    @delete="DeleteZhiCheng"
                    :before-delete="beforeDelZhiCheng"
                    image-fit="cover"
                    accept="image/*"
                    preview-size="27vw"
                    :after-read="updateFileZhiCheng"
                    multiple="true"
      />
    </div>
    <van-collapse style="margin: 5px 0" v-model="activeNames2">
      <van-collapse-item title="示例" name="1">
        <div class="Examples">
          <div></div>
          <div></div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <div class="sign">证件照片仅用于实名认证，平台将添加水印保证您的信息安全</div>
    <div class="bottom">
      <button class="keepButton lastStep" @click="lastStep">上一步</button>
      <button class="keepButton next" @click="nextStep">下一步</button>
    </div>
  </div>
</template>

<script>
import lrz from 'lrz'
import {Toast} from 'vant'

export default {
  name: 'PracticeCertificate',
  data () {
    return {
      menuIndex: 1,
      menuList: [
        {
          title: '执业信息',
          url: '/CareerInformation'
        }, {
          title: '执业证书',
          url: '/PracticeCertificate'
        }, {
          title: '实名信息',
          url: '/RealNameInfomation'
        }
      ],
      activeNames1: ['1'],
      activeNames2: ['2'],
      PracticeInfo: {
        zhiYeFileList: [],
        PRACTICE_CERTIFICATE_PIC: [], // 执业证书图片
        zhiChengFileList: [],
        TITLE_CERTIFICATE_PIC: [] // 职称证书图片
      },
      ZYisSend: true, // 执业
      ZCisSend: true // 职称
    }
  },
  mounted () {
    let data = JSON.parse(sessionStorage.getItem('realNameData'))
    if (data) {
      if (data.PracticeInfo) { this.PracticeInfo = data.PracticeInfo }
    }
  },
  methods: {
    // 步骤条切换
    changeMenu () {

    },
    // 上一步
    lastStep () {
      this.imgFor()
      this.$router.replace({path: this.menuList[this.menuIndex - 1].url})
    },
    // 下一步
    nextStep () {
      if (this.PracticeInfo.PRACTICE_CERTIFICATE_PIC.length < 2) {
        Toast('最少上传两张执业证书')
        return false
      }
      if (this.PracticeInfo.TITLE_CERTIFICATE_PIC.length <= 0) {
        Toast('请上传职称证书')
        return false
      }
      this.imgFor()
      this.$router.replace({path: this.menuList[this.menuIndex + 1].url})
    },
    imgFor () {
      if (this.PracticeInfo.PRACTICE_CERTIFICATE_PIC.length > 0) {
        // 执业证书
        this.PracticeInfo.zhiYeFileList = []
        this.PracticeInfo.PRACTICE_CERTIFICATE_PIC.map((curr, index) => {
          let obj = {
            url: curr, isImage: true
          }
          this.PracticeInfo.zhiYeFileList.push(obj)
        })
      }

      if (this.PracticeInfo.TITLE_CERTIFICATE_PIC.length > 0) {
        // 职称证书
        this.PracticeInfo.zhiChengFileList = []
        this.PracticeInfo.TITLE_CERTIFICATE_PIC.map((curr, index) => {
          let obj = {
            url: curr, isImage: true
          }
          this.PracticeInfo.zhiChengFileList.push(obj)
        })
      }

      let data = JSON.parse(sessionStorage.getItem('realNameData'))
      // let arry = {
      //   CareerInfo: data.CareerInfo,
      //   PracticeInfo: this.PracticeInfo
      // }
      data.PracticeInfo = this.PracticeInfo
      sessionStorage.setItem('realNameData', JSON.stringify(data))
    },
    // 执业证书删除
    DeleteZhiyeImg (file, detail) {
      this.PracticeInfo.PRACTICE_CERTIFICATE_PIC.splice(detail.index, 1)
    },
    // 执业证书删除之前
    beforeDelZhiYe () {
      if (this.ZYisSend) {
        return true
      } else {
        Toast('请上传完成之后再进行操作')
        return false
      }
    },
    // 执业证书上传
    updateFileZhiye (file) {
      this.ZYisSend = false
      if (file.length !== undefined) {
        this.zhiYeUploadMore(file, 0)
      } else {
        this.zhiYeUploadOnly(file)
      }
    },
    zhiYeUploadMore (file, i) {
      if (i === file.length) {
        this.ZYisSend = true
        return false
      }
      this.ZYisSend = false
      if (i === 0) {
        file.map((curr, index) => {
          file[index].status = 'uploading'
          file[index].message = '正在上传中...'
        })
      }
      lrz(file[i].file, {
        width: 2000,
        quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
      })
        .then((rst) => {
          this.$http.img({base64: rst.base64, type: 9})
            .then(res => {
              console.log(res)
              if (res.data.status === 'success') {
                this.PracticeInfo.PRACTICE_CERTIFICATE_PIC.push(res.data.data)
                file[i].status = ''
                file[i].message = ''
                i++
                this.zhiYeUploadMore(file, i)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch((error) => {
          console.log('失败', error)
        })
    },
    zhiYeUploadOnly (file) {
      file.status = 'uploading'
      file.message = '正在上传中...'
      lrz(file.file, {
        width: 2000,
        quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
      })
        .then((rst) => {
          this.$http.img({base64: rst.base64, type: 9})
            .then(res => {
              console.log(res)
              if (res.data.status === 'success') {
                this.PracticeInfo.PRACTICE_CERTIFICATE_PIC.push(res.data.data)
                this.ZYisSend = true
                file.status = ''
                file.message = ''
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch((error) => {
          console.log('失败', error)
          // 失败时执行
        })
    },
    // 职称删除
    DeleteZhiCheng (file, detail) {
      this.PracticeInfo.TITLE_CERTIFICATE_PIC.splice(detail.index, 1)
    },
    // 职称删除之前
    beforeDelZhiCheng () {
      if (this.ZCisSend) {
        return true
      } else {
        Toast('请上传完成之后再进行操作')
        return false
      }
    },
    // 上传职称
    updateFileZhiCheng (file) {
      if (file.length !== undefined) {
        this.ZhiChengUploadMore(file, 0)
      } else {
        this.ZhiChengUploadOnly(file)
      }
    },
    // 职称上传
    ZhiChengUploadOnly (file) {
      this.ZCisSend = false
      file.status = 'uploading'
      file.message = '正在上传中...'
      lrz(file.file, {
        width: 2000,
        quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
      })
        .then((rst) => {
          this.$http.img({base64: rst.base64, type: 9})
            .then(res => {
              console.log(res)
              if (res.data.status === 'success') {
                this.PracticeInfo.TITLE_CERTIFICATE_PIC.push(res.data.data)
                this.ZCisSend = true
                file.status = ''
                file.message = ''
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch((error) => {
          console.log('失败', error)
          // 失败时执行
        })
    },
    ZhiChengUploadMore (file, i) {
      if (i === file.length) {
        this.ZCisSend = true
        return false
      }
      this.ZCisSend = false
      if (i === 0) {
        file.map((curr, index) => {
          file[index].status = 'uploading'
          file[index].message = '正在上传中...'
        })
      }
      lrz(file[i].file, {
        width: 2000,
        quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
      })
        .then((rst) => {
          this.$http.img({base64: rst.base64, type: 9})
            .then(res => {
              console.log(res)
              if (res.data.status === 'success') {
                this.PracticeInfo.TITLE_CERTIFICATE_PIC.push(res.data.data)
                file[i].status = ''
                file[i].message = ''
                i++
                this.ZhiChengUploadMore(file, i)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch((error) => {
          console.log('失败', error)
        })
    }
    // // 返回
    // back () {
    //   this.$router.history.go(-1)
    // },
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.top{
  position: sticky;
  top: 0;
  z-index: 9;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}

.title{
  width: 100%;
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  padding: 0 15px;
  box-sizing: border-box;
  font-weight: bold;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}
.describe{
  background: #FFFFFF;
  font-size: 13px;
  font-weight: 500;
  color: #999999;
  padding: 0 15px;
  box-sizing: border-box;
}
.Examples{
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.Examples div{
  width: 48%;
  height: 100%;
  background: #F3F3F3;
  border: 1px solid #E5E5E5;
}
.sign{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #EC6941;
  padding: 0 15px;
  box-sizing: border-box;
}
.imgDiv{
  width: 100%;
  padding: 10px 15px;
  box-sizing: border-box;
  margin: 0 auto;
}
.tips{
  min-height: 35px;
  background: #FEFAF8;
  color: #ED8052;
  font-size: 13px;
}
.tips,
.bottom{
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom{
  height: 60px;
  background: #FFFFFF;
  position: sticky;
  bottom: 0;
}
.keepButton{
  width: 92%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 10px;
  border: none;
  margin: 10px 3%;
  font-size: 17px !important;
  font-weight: bold;

}
.next{
  color: #FFFFFF;
}
.lastStep{
  border: 1px solid #1DA4F2;
  background: #FFFFFF;
  color: #1da4f2;
}
.menu{
  width: 100%;
  height: 60px;
  background: #1DA4F2;
  box-shadow: 0px 1px 0px 0px #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
}
/*/ 选择框 开始样式/*/
/deep/ .el-steps--horizontal{
  width: 105%;
}
/deep/ .el-step.is-center .el-step__description{
  padding: 0;
}
/deep/ .el-step__description{
  margin: 0;
  font-size: 13px;
}
/deep/ .el-step__icon{
  width: auto;
  height: auto;
}
/deep/ .el-step__icon.is-text{
  border: none;
}
/deep/ .is-finish,
/deep/ .el-step__description.is-process{
  color: #fff;
}
/deep/ .el-step__description.is-finish{
  color: white !important;
}
/deep/ .el-step__description.is-wait{
  color: rgba(255, 255, 255, 0.7);
}
/deep/ .el-step__head.is-finish{
  border-color: #fff;
}
/deep/ .el-step__head.is-wait{
  border-color: transparent !important;
}
/deep/ .el-step__line{
  border-color: transparent !important;
}
/deep/ .el-step.is-horizontal .el-step__line{
  height: 1px;
  /*top:7px;*/
  top: 35%;
}
/deep/ .el-step__line{
  background: white;
}
/*/ 选择框 结束样式/*/
</style>
